<template>
  <div class="firePanel">
      <el-date-picker
      v-model="daterange"
      popper-class="eventTimePicker"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    
    <div class="reportBox">
      <div class="reportItem" v-for="(item,index) of dataList" :key="index" @click="changeReport(item)">
        <p>{{index + 1}}、</p>
        <p>{{item}}火情日报</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"firePanel",
  data(){
    return{
      daterange: '',
      dataList:[],
    }
  },
  watch:{
    daterange(val){
      console.log(val)
      this.cutDate([new Date(val[0]).getTime(),new Date(val[1]).getTime()])
    },
  },
  mounted(){
    let today = new Date().getTime();
    this.daterange = [today, today]
  },
  methods:{
    // 时间段分割
    cutDate(time){
      this.dataList = [];
      let startDate = time[0];
      let endDate = time[1];
      let timestamp = startDate;
      while(timestamp <= endDate){
        let timeRes = this.dataFormate(timestamp)
        this.dataList.push(timeRes)
        timestamp += 1000 * 60 * 60 * 24
      }
      console.log(this.dataList)
      //默认展示第一个日报内容
      this.changeReport(this.dataList[0])
    },
    // 时间戳转年月日
    dataFormate(timestamp){
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1
      let day = date.getDate()
      month = month < 10 ? `0${month}` :month;
      day = day < 10 ? `0${day}` :day;
      return `${year}-${month}-${day}`
    },
    // 切换日报时间
    changeReport(time){
      //this.$emit("changeReport", time)
      console.log("点击火情")
      //传递事件给组件
      this.$store.commit("changeDayReportFireTime",time)
      //修改左侧组件
      this.$store.commit("changeSjzxLeftCurrentComponent","FireMonitorDayReportCheck")
    },
    // 获取火点数据
    
  },
}
</script>
<style >
    .firePanel .el-range-editor .el-range-input{
        background:transparent!important;
    }
    .firePanel .el-date-editor{
        margin-left:10px;
    }
</style>
<style lang="stylus" scoped>
.firePanel{
    .eventTimePicker{
        margin-left:5px;
        .el-date-range-picker__content .el-date-range-picker__header div, .el-date-table td span{
            color:#000;
        }
    }
    height: vh(480);
    display: flex;
    margin-top:15px;
    flex-direction: column;
    .reportBox{
        flex: 1;
        overflow: auto;
        overflow-x: hidden;
        margin:10px 10px;
        .reportItem{
            cursor: pointer;
            display: flex;
            // border-bottom:1px dashed #eee;
            padding-bottom:5px;
            padding-top:3px;
            font-size:16px;
            padding-left:vw(5);
            background:rgba(0,0,0,.3);
            margin-bottom:vh(5);
            p{
                line-height: 30px;
            }
            p:first-child{
                width: 30px;
            }
            p:last-child{
                text-align: left;
                flex: 1;
                &:hover{
                color:#10daff
                }
            }
        
        }
    }
}
</style>